import React, { Component } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { PrimaryBtn, Button } from 'bee/components/Buttons';
import { Title, TotalView, RadioPicker } from 'bee/components/MakePlan';
// import DatePicker from 'bee/components/DatePicker';
import ChooseBtn from 'bee/components/MakePlan/ChooseBtn';
import { noop } from 'bee/utils';
import Picker from 'react-native-picker';
import { Item, AuthCode } from 'bee/components/CompleteInfo';
import { Attache } from 'bee/components/Attache';
import { pickerOptions, createDateData } from 'bee/pickerOptions';
import { colors } from 'bee/themes';
import Benes from 'bee/containers/CompleteInfo/Benes';
import { SCREENS } from 'bee/constants';
import HolderInfo from './HolderInfo';

import styles from './styles';
import { Languages } from 'bee/constants/Languages';

// @flow
// type Props = {
//   navigation: Object,
// };

const { white } = colors;

export default class CompleteInfo extends Component<Props> {
  static showDatePicker(cb = noop) {
    const date = createDateData();
    const options = pickerOptions(date, value => cb(value));

    Picker.init(options);
    Picker.show();
  }

  constructor() {
    super();

    // const beneinfo = {
    //   relation: '', // 受益人和被保险人的关系
    //   cardType: '', // 制定受益人证件类型
    //   name: '', // 姓名
    //   idCard: '', // 证件号码
    //   birth: '', // 出生日期
    //   sex: 0, // 性别
    //   order: 0, // 受益顺序
    //   scale: '', // 受益比例
    //   phone: '', // 手机号码
    // };

    this.state = {
      indate: '', // 证件有效期日期
      holderInfo: {},
      beneinfo: [{}],
    };
  }

  render() {
    const { relation, beneinfo } = this.state;
    const { navigate } = this.props.navigation;

    return (
      <ScrollView style={{ flex: 1 }}>
        <Attache />
        {/* 投保人信息 */}
        <HolderInfo
          info={this.state.holderInfo}
          jumpToNotes={() => {
            navigate(SCREENS.InsuredToInform);
          }}
          changeInfo={info => {
            this.setState({ holderInfo: info });
          }}
        />

        {/* 被保险信息 */}
        <View style={styles.section}>
          <Title title="被保险人信息：同投保人" />
          <Item title="被保险人是保险人的">
            <ChooseBtn onPress={this.showRelations} text={relation} />
          </Item>
        </View>

        {/* 受益人信息 */}
        <View style={styles.section}>
          <Title title={Languages.favoree} />
          <Item>
            {[Languages.laywerFavoree, Languages.designatedBeneficiary].map(
              (value, index) => (
                <RadioPicker
                  key={index}
                  index={index}
                  value={value}
                  isSelected={this.state.benefitType === index}
                  onPress={() => {
                    this.setState({ benefitType: index });
                  }}
                />
              )
            )}
          </Item>

          {this.state.benefitType === 0 ? null : (
            <Benes
              data={beneinfo}
              changeInfo={info => {
                this.setState({ beneinfo: info });
              }}
            />
          )}
        </View>

        {this.state.benefitType === 0 ? null : (
          <View style={styles.addBeneficiaryView}>
            <Button
              textStyle={styles.addBeneficiary}
              text={Languages.addFavoree}
              onPress={() => {
                const benes = this.state.beneinfo;
                benes.push({});
                this.setState({ beneinfo: benes });
              }}
            />
          </View>
        )}

        <View style={styles.authcodeView}>
          <AuthCode
            value={this.state.code}
            onChangeText={() => {}}
            sendCode={() => {}}
          />
        </View>
        {/* </ScrollView> */}

        <View style={styles.buttonView}>
          <TotalView total={20} />
          <View style={{ width: '50%' }}>
            <PrimaryBtn
              text={Languages.nextStep}
              bgc={colors[1001]}
              fontColor={white}
              onPress={() => {}}
            />
          </View>
        </View>
      </ScrollView>
    );
  }
}
